Skip to content

Conversation

robertky
Copy link
Member

@robertky robertky commented Sep 15, 2026

Summary

Closes #33.

  • Makes the subject and sort controls responsive: side by side when there is space, stacked on narrow screens
  • Refines the book card so long titles and tags wrap instead of forcing horizontal overflow
  • Shows at most five OpenLibrary subject tags and adds a +N more indicator for the remainder
  • Keeps the existing book navigation and favorites behaviour unchanged

Implementation

  • src/App.tsx: groups the subject and sort controls in a shared responsive layout container
  • src/App.css: adds the two-column desktop layout, narrow-screen spacing, and mobile heading sizing
  • src/components/BookCard.tsx: derives the five visible subjects and remaining-subject count from the book data
  • src/components/BookCard.css: improves grid sizing, long-text wrapping, subject-tag layout, and the narrow-screen cover ratio
  • src/components/BookCard.test.tsx: tests that a long list is limited and reports the hidden count
  • src/__snapshots__/App.test.tsx.snap and src/components/__snapshots__/BookCard.test.tsx.snap: deliberately updated for the new layout wrapper and accessible subject-list name

User flow

  1. On a larger screen, subject and sorting choices are presented together without taking unnecessary vertical space.
  2. On a narrow screen, the choices stack and remain full-width and readable.
  3. A book with many OpenLibrary subjects displays its first five tags plus a clear count such as +7 more.
  4. Long titles and tags wrap inside the card rather than expanding the page horizontally.
  5. Adding a favorite still immediately changes the button state and keeps the book in the Favorites overview.

Validation

  • npm run format:check
  • npm run lint
  • npm test — 52 tests passed across 12 test files
  • npm run build

Checklist

@robertky robertky requested a review from a team as a code owner September 15, 2026 08:46
@robertky robertky added type: feature New functionality or requirement area: styling Plain CSS, responsive design priority: high Required for first delivery status: in-review PR is open and awaiting review ai-assisted Substantial AI-generated code (documented per spec) labels Sep 15, 2026
Copy link
Member

@rachelks rachelks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The responsive layout works well at 320px and I don't see any horizontal overflow. One thing I noticed is that the book information can be difficult to read when it is displayed directly on top of the cover, especially the author and publication year here. This could probably be an even bigger issue with darker/busier covers. Could we improve the contrast on the narrow layout?

Also a small styling detail: I think a little more spacing between the subject tags and the "Add to favorites" button would make the mobile layout easier to read.

Copy link
Member

@rachelks rachelks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now! The text on the book card is much easier to read on small screens, and the spacing before the favorite button is better.

@rachelks rachelks merged commit abe2fa4 into main Sep 16, 2026
1 check passed
@rachelks rachelks added this to the M4 — Quality milestone Sep 16, 2026
Sign in to join this conversation on GitHub.
Labels
ai-assisted Substantial AI-generated code (documented per spec) area: styling Plain CSS, responsive design priority: high Required for first delivery status: in-review PR is open and awaiting review type: feature New functionality or requirement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: make the library view responsive and limit long subject lists
2 participants